<template>
  <div class="bg-color-white">
     <div>
       <!-- 平台类型 -->
       <third-platform-head
       v-loading.fullscreen.lock="fullscreenLoading"
         :showTmallIcon="false"
         :showKuaiShouIcon="false"
         @platformTypeChange="platformTypeChange">
       </third-platform-head>
    </div>
    <!--顶部搜索 -->
    <div class="top-operate-default mar-t-20">
      <div class="search-item">
        <label>快递公司：</label>
        <el-input v-model="dataListQuery.expressName" style="width:200px" placeholder="请输入快递公司名称"></el-input>
        <label class="mar-l-20">店铺：</label>
        <el-select v-model="dataListQuery.shopId" placeholder="请选择店铺" class="expend" @change="changeShop">
          <el-option v-for="item in shopList" :key="item.shopId" :label="item.shopName" :value="item.shopId">
          </el-option>
        </el-select>
        <el-button-group class="mar-l-20">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" style="margin-left: 10px" v-if="synFaceSheetTemplateButton" @click="synFaceSheetTemplate()" :loading="synLoading">同步面单模板</el-button>
        </el-button-group>
      </div>
    </div>
    <!-- 内容列表 -->
    <div v-for="(item, i) in dataList">
      <el-collapse accordion @change="item.isOpen = !item.isOpen">
        <el-collapse-item>
          <template slot="title">
            <div class="v-align-c mar-b-6 width-per-100 pad-l-4">
              <div>
                <i :class="!item.isOpen ? 'el-icon-circle-plus-outline' : 'el-icon-remove-outline'"></i>
                <span class="mar-l-4 mar-r-20">{{item.dtoList[0].expressName}}</span>
              </div>
            </div>
          </template>
          <!-- 表格 -->
          <div>
            <el-table  ref="multipleTable" :data="item.dtoList"
                element-loading-text="加载中" style="width: 100%"
                header-cell-class-name="default-header" row-class-name="default-row">
              <el-table-column width="200px" label="模板名称" prop="templateName" >
                <template slot-scope="scope">
                  {{ scope.row.templateName }}
                </template>
              </el-table-column>
              <el-table-column width="200px" label="模板类型" prop="templateDataType" align="center">
                <template slot-scope="scope">
                  {{ scope.row.templateDataType === 1 ? '标准' : '自定义区' }}
                </template>
              </el-table-column>
              <el-table-column width="400px" label="模板URL" prop="templateUrl" align="center">
                <template slot-scope="scope">
                {{scope.row.templateUrl}}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
  import { getTemplateList, synFaceSheetTemplate } from '@/api/user/expressFaceSheetTemplate'
  import thirdPlatformHead from '../../../../shop/components/third-platform-head'
  import { listThirdShop } from '@/api/user/third-shop'

  export default {
    components: { thirdPlatformHead },
    props: {
      villageSupplierConfig: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        // 查询表单
        dataListQuery: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: this.getSupplierId(),
          expressName: '',
          shopId: '',
          currentPage: 1,
          size: 10
        },
        dataList: [],
        shopList: [],
        platformType: 1,
        fullscreenLoading: false,
        synLoading: false,
        synFaceSheetTemplateButton: true,
        // 面单使用数据类型：1-企业数据；2-供应商数据
        douYinUseType: '',
        taoBaoUseType: '',
        pinDuoDuoUseType: ''
      }
    },
    // 初始化页面
    created() {
      // 获取供应商使用面单方式：1-企业；2-供应商
      if (this.getSupplierId()) {
        const villageSupplierConfig = this.villageSupplierConfig
        if (!villageSupplierConfig) {
          this.$message({ type: 'error', message: '获取供应商配置错误！' })
          return
        }
        this.taoBaoUseType = villageSupplierConfig.taoBaoUseType
        this.douYinUseType = villageSupplierConfig.douYinUseType
        this.pinDuoDuoUseType = villageSupplierConfig.pinDuoDuoUseType
        if (this.douYinUseType === 1) {
          this.synFaceSheetTemplateButton = false
        }
      }
      this.init()
    },
    methods: {
      // 初始数据
      init() {
        const initFx = new Promise((resolve, reject) => {
          this.initShop(resolve, reject)
        })
        initFx.catch((result) => {
          this.$message({ type: 'error', message: result })
          return
        })
        initFx.then((result) => {
          if (result === 'success') {
            this.getTemplateList()
          }
        })
      },
      // 获取模板数据
      getTemplateList() {
        this.fullscreenLoading = true
        const shopId = this.dataListQuery.shopId
        if (!shopId) {
          this.$message({
            type: 'error',
            message: '请选择店铺!'
          })
        }
        this.dataListQuery.platformType = this.platformType
        getTemplateList(this.dataListQuery).then(response => {
          this.fullscreenLoading = false
          const dataList = response.data
          dataList.forEach(d => {
            d.isOpen = false
          })
          this.dataList = dataList
        })
      },
      // 同步面单模板
      synFaceSheetTemplate() {
        this.synLoading = true
        synFaceSheetTemplate(this.dataListQuery).then(response => {
          if (response.isError) return
          this.synLoading = false
          this.init()
        })
      },
      // 获取第三方店铺列表(企业、供应商)
      initShop(resolve, reject) {
        this.fullscreenLoading = true
        this.dataListQuery.shopId = ''
        const platformType = this.platformType
        const params = {
          enterpriseId: this.getEnterpriseId(),
          supplierId: this.getSupplierId(),
          platformType: platformType
        }
        if ((platformType === 1 && this.douYinUseType === 1) || (platformType === 3 && this.taoBaoUseType === 1) || (platformType === 4 && this.pinDuoDuoUseType === 1)) {
          params.supplierId = ''
        }
        listThirdShop(params).then(response => {
          if (response.isError) return
          if (response.data) {
            if (response.data.length > 0) {
              this.dataListQuery.shopId = response.data[0] && response.data[0].shopId
              resolve('success')
              this.shopList = response.data
            } else {
              this.fullscreenLoading = false
              reject('平台下不存在店铺，请检查！')
            }
          }
        })
      },
      // 平台类型切换事件
      platformTypeChange(platformType) {
        this.synLoading = false
        this.dataListQuery.expressName = ''
        this.dataListQuery.shopId = ''
        this.shopList = []
        this.dataList = []
        this.platformType = platformType
        if (this.platformType === 1 && this.douYinUseType === 1 && this.getSupplierId()) {
          this.synFaceSheetTemplateButton = false
        }
        if (this.platformType === 3 && this.taoBaoUseType === 1 && this.getSupplierId()) {
          this.synFaceSheetTemplateButton = false
        }
        if (this.platformType === 4 && this.pinDuoDuoUseType === 1 && this.getSupplierId()) {
          this.synFaceSheetTemplateButton = false
        }
        this.init()
      },
      // 店铺选择事件
      changeShop() {
        this.init()
      },
      // 查询
      handleSearch() {
        this.init()
      },
      // 重置事件
      resetSearch() {
        this.dataListQuery.expressName = ''
        this.init()
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
